<template>
  <div class="contant">
    <img src="/static/imgs/hero/firstBg.png" alt="" class="firstBg">
    <img src="/static/imgs/hero/synthesisBg.png" alt="" class="synthesisBg">
    <img src="/static/imgs/hero/synthesisBtn.png" alt="" class="firstBtn" @click="synthesis">
    <div class="three">
      <img src="/static/imgs/hero/noHero.png" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="threeT" id="threeT">1</div>
      <div class="threeB">吕布</div>
    </div>
    <div class="one" @click="toHero(0)">
      <img src="/static/imgs/hero/noHero.png" alt="">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+param.numL+'.jpg'" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="oneT" id="oneT">1</div>
      <div class="oneB">吕布</div>
    </div>
    <div class="two" @click="toHero(1)">
      <img src="/static/imgs/hero/noHero.png" alt="">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+param.numR+'.jpg'" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="twoT" id="twoT">1</div>
      <div class="twoB">吕布</div>
    </div>
    <com-tab></com-tab>
  </div>
</template>

<script>
  import tab from '@/components/tab'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'synthesis',
    data () {
      return {
        param: this.$route.query
      }
    },
    mounted: {
     },
    methods : {
      synthesis () {
        Toast('暂不能合成');
      },
      toHero (num) {
        let _qurry = this.$route.query;
        _qurry.weizhi = num;
        this.$router.push({path: '/hero',query: _qurry})
      }
    },
    components: {
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    color: white;
    .firstBg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .synthesisBg{
      width: 100%;
      margin-top: 25%;
    }
    .firstBtn{
      width: 82%;
      position: absolute;
      left: 9%;
      bottom: 14%;
      z-index: 3;
    }
    .three{
      width: 42.8%;
      height: 30%;
      position: absolute;
      left: 28.6%;
      top:20%;
      z-index: 5;
      .threeT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .threeB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0px;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 1rem;
      }
    }
    .one{
      width: 34.8%;
      height: 25%;
      position: absolute;
      left: -2%;
      top:43%;
      z-index: 4;
      transform:rotate(-14deg);
      .oneT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .oneB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 0.8rem;
      }
    }
    .two{
      width: 34.8%;
      height: 25%;
      position: absolute;
      right: -2%;
      top:43%;
      z-index: 4;
      transform:rotate(14deg);
      .twoT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .twoB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 0.8rem;
      }
    }
    .three>img,.one>img,.two>img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  @media screen and (max-width: 350px) {
    #oneT{
      top:2px;
    }
    #twoT{
      top:2px;
    }
  }
  @media screen and (min-height: 740px)  and (min-width: 360px){
    #threeT{
      top:15px;
    }
  }
</style>
